<template>
  <div class="data-container">
      <analysis-home :active="3"></analysis-home>
      <div class="analysis3-main-content">
        <el-row>
          <el-col :span="6">
            <div class=" item h-1">
              <box-card-single-analysis-3-yiyuanliebiao :data="hospitalData" title="医院列表"></box-card-single-analysis-3-yiyuanliebiao>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="map  h-1-3 cout-number">
              <div class="box">
                <box-card-single-analysis-3-menzhenzongshu title="门诊总数统计" :items="items2"></box-card-single-analysis-3-menzhenzongshu>
              </div>
              <div class="box">
                <box-card-single-analysis-3-zhuyuanzongshutongji title="住院总数统计" :items="items2"></box-card-single-analysis-3-zhuyuanzongshutongji>
              </div>
            </div>
            <div class="map  h-1-3">
              <box-card-multi-analysis-3-menjizhengguahao title="门急诊挂号/医技/处方趋势统计" :items="items3"></box-card-multi-analysis-3-menjizhengguahao>
            </div>
            <div class="map  h-1-3">
              <box-card-multi-analysis-3-zhuyuanzaichuang title="住院在床/手术统计" :items="items4"></box-card-multi-analysis-3-zhuyuanzaichuang>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box-card  item">
              <box-card-single-analysis-3-yiliaojigoujibenxinxi title="医疗机构基本信息"></box-card-single-analysis-3-yiliaojigoujibenxinxi>
            </div>
            <div class="box-card  item">
              <box-card-multi-analysis-3-menzhenghuanzhenianling title="门急诊患者年龄段统计" :items="items5"></box-card-multi-analysis-3-menzhenghuanzhenianling>
            </div>
            <div class="box-card  item">
              <box-card-multi-analysis-3-menzhengnannvbili title="门急诊男女比例统计" :items="items6"></box-card-multi-analysis-3-menzhengnannvbili>
            </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import analysisHome from './analysisHome'
import BoxCardMultiAnalysis3Menjizhengguahao from './components/box-card-multi-analysis3-menjizhengguahao.vue';
import BoxCardMultiAnalysis3Menzhenghuanzhenianling from './components/box-card-multi-analysis3-menzhenghuanzhenianling.vue';
import BoxCardMultiAnalysis3Menzhengnannvbili from './components/box-card-multi-analysis3-menzhengnannvbili.vue';
import BoxCardMultiAnalysis3Zhuyuanzaichuang from './components/box-card-multi-analysis3-zhuyuanzaichuang.vue';
import BoxCardSingleAnalysis3Menzhenzongshu from './components/box-card-single-analysis3-menzhenzongshu.vue';
import BoxCardSingleAnalysis3Yiliaojigoujibenxinxi from './components/box-card-single-analysis3-yiliaojigoujibenxinxi.vue';
import BoxCardSingleAnalysis3Yiyuanliebiao from './components/box-card-single-analysis3-yiyuanliebiao.vue';
import BoxCardSingleAnalysis3Zhuyuanzongshutongji from './components/box-card-single-analysis3-zhuyuanzongshutongji.vue';

export default {
components: {
    analysisHome,
    BoxCardSingleAnalysis3Yiyuanliebiao,
    BoxCardMultiAnalysis3Menjizhengguahao,
    BoxCardMultiAnalysis3Zhuyuanzaichuang,
    BoxCardMultiAnalysis3Menzhenghuanzhenianling,
    BoxCardMultiAnalysis3Menzhengnannvbili,
    BoxCardSingleAnalysis3Yiliaojigoujibenxinxi,
    BoxCardSingleAnalysis3Menzhenzongshu,
    BoxCardSingleAnalysis3Zhuyuanzongshutongji
  },
  data() {
    return {
      hname:'200',
      curId1:0,
  
    items1:[
        {
          id:0,
          label:'2020'
        },
        {
          id:1,
          label:'2019'
        },
      ],
      curId2:0,
      items2:[
        {
          id:0,
          label:'2019'
        },
        {
          id:1,
          label:'2020'
        },
      ],
      curId3:0,
      items3:[
        {
          id:0,
          label:'挂号总数'
        },
        {
          id:1,
          label:'医技总数'
        },
        {
          id:2,
          label:'处方总数'
        },
      ],
      curId4:0,
      items4:[
        {
          id:0,
          label:'在床总数'
        },
        {
          id:1,
          label:'手术总数'
        }
      ],
      curId5:0,
      items5:[
        {
          id:0,
          label:'门诊'
        },
        {
          id:1,
          label:'急症'
        }
      ],
      curId6:0,
      items6:[
        {
          id:0,
          label:'门诊'
        },
        {
          id:1,
          label:'急症'
        }
      ],
      hospitalData:[
        {
          id:1,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'2'
        },
        {
          id:2,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'3'
        },
        {
          id:3,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'4'
        },
        {
          id:4,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'5'
        },
        {
          id:5,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'6'
        },
        {
          id:6,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'7'
        },
        {
          id:7,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'8'
        },
        {
          id:8,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'9'
        },
        {
          id:9,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'10'
        },
        {
          id:10,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'11'
        },
        {
          id:11,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'12'
        },
        {
          id:12,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'13'
        },
        {
          id:13,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'14'
        },
        {
          id:14,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'15'
        },
        {
          id:15,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'169'
        },
        {
          id:16,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:17,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:18,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:19,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:20,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:21,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:22,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        },
        {
          id:23,
          hname:'xxx县第一人民医院',
          level:'二甲',
          number:'26'
        }
      ]
    };
  },
  methods: {

  },
};
</script>

<style scoped lang="less">
.left{float: left;}
.right{float: right;}
.red{ background: red;}
.green{ background: green;}
.blue{ background: blue;}
.data-container{
  background:url('~@/assets/images/large-bg.png') no-repeat;
  height: 100vh;
  background-size:cover;
  background-position: center center;
  .analysis3-main-content{
    .borderBottom-1px{
      border-bottom: 1px solid #7787C7 ;
    }
    .borderBottom-2px{
      border-bottom: 2px solid #7787C7 ;
    }
    padding:.1rem;
    .el-row{
      height: calc(100vh - 1.23rem);
      .el-col{
        height:calc(100vh - 1.23rem);
        .borderBottom-1px{
          border-bottom: .01rem solid #7787C7 ;
        }
        .borderBottom-2px{
          border-bottom: .02rem solid #7787C7 ;
        }
        .box-card{
          width: 98%;
          margin-left: 1%;
          margin-right: 1%;
          height:calc( (100vh - 1.23rem) / 3 );
          overflow: hidden;
          .head-wrap{
            font-size: .16rem;
            color:#ffffff;
            overflow: hidden;
            .title{
              height: .26rem;
              line-height: .262rem;
            }
            .operate{
              span{
                height: .26rem;
                line-height: .26rem;
                display: inline-block;
                cursor: pointer;
                background: url('~@/assets/images/671.png') no-repeat center center;
                background-size: contain;
                padding: 1px .2rem;
              }
              span.active{
                background: url('~@/assets/images/670.png') no-repeat center center;
                background-size: contain;
                padding: 1px .2rem;
              }
            }
          }
          .content-wrap{
            width: 100%;
            height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
            .chart-content{
              width: 100%;
              height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
              float: left;
              overflow: hidden;
            }
          }
          img{width: 100%;float: left;}
        }
        .map{
          height:calc( (100vh - 1.23rem) * 2 / 3 );
          margin-left: 1%;
          margin-right: 1%;
        }
        .cout-number{
            display: flex;
            justify-content: space-between;
            .box{
              width: 48%;
              font-size: 16px;
              margin-left: 1%;
              margin-right: 1%;
            }
          }
        .h-1-3{height:calc( (100vh - 1.15rem) / 3 ) !important; overflow: hidden;}
      }
    }
    .h-1{height:calc( 100vh - 1.23rem ) !important;}
    .h-1-2{height: calc( (100vh - 1.23rem) / 2 );}
    .h-1-3{height:calc( (100vh - 1.22rem) / 3 ) !important;}
  }
}
</style>

